<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Child</title>
</head>

<body>
  <h1>iframe</h1>
  <button id="sendMessage">给父元素发消息</button>

  <script>
    // 监听来自父页面的消息
    window.addEventListener('message', (event) => {
      console.log('parent页的消息:', event.data);
    });

    // 发送消息到父页面
    const sendMessageButton = document.getElementById('sendMessage');
    sendMessageButton.addEventListener('click', () => {
      const message = { text: 'iframe message!' };
      window.parent.postMessage(message, '*'); // 使用 '*' 作为目标域
    });
  </script>
</body>

</html>
